<template>
	<view class="login">
		
		<view class="login-main">
			<view class="main-card">
				<view class="main-text">
					<text>Register</text>
				</view>
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item  name="username" label="用户名" labelAlign="right" required>
						<uni-easyinput v-model="valiFormData.username" placeholder="用户名" />
					</uni-forms-item>
					<view>
						<uni-forms-item name="password" label="密码" labelAlign="right" required>
							<uni-easyinput v-model="valiFormData.password" placeholder="请输入6-12位密码" />
						</uni-forms-item>
					</view>
					
					<uni-forms-item name="securitycode" label="安全码" labelAlign="right" required>
						<uni-easyinput type="text" v-model="valiFormData.securitycode" placeholder="请输入6-12位安全码" />
					</uni-forms-item>
					<uni-forms-item label="性别" name="sex" labelAlign="center">
						<uni-data-checkbox v-model="valiFormData.sex" :localdata="sexs" @change="handleSexValue" />
					</uni-forms-item>

				</uni-forms>
				<button type="primary" @click="submit('valiForm')">注册</button>
				<view class="card-register" @tap="goLogin">
					<text>已有账号</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import http from "@/util/request.js"
	import axios from "axios"
	import {
		domain
	} from "process";
	export default {
		data() {
			return {
				
				// 校验表单数据
				valiFormData: {
					username: '',
					password: '',
					sex: '',
					securitycode: ''
				},
				// 校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入6-12位密码'
						},{
							validateFunction: function(rule, value, data, callback) {
								let pwd = /^[A-Za-z0-9]{6,12}$/
								if (!pwd.test(value)) {
									callback('请输入6-12位密码，请重新填写')
								}
								return true
							}
						}
						]
					},
					
					sex: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
						}]
					},
					securitycode: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^[A-Za-z0-9]{6,12}$/
								if (!iphoneReg.test(value)) {
									callback('格式不正确，请重新填写')
								}else if(value == data.password){
									callback('格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					
				},
				// 单选数据源
				sexs: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 2
				}]
			}
		},
		methods: {
			
			handleSexValue(e) {
				this.valiFormData.sex = e.detail.value;
			},
			
			submit(ref) {
				const username = this.valiFormData.username
				const password = this.valiFormData.password
				const sex = (this.valiFormData.sex === 1?'男':'女')
				const securitycode = this.valiFormData.securitycode
				console.log(securitycode);
				this.$refs[ref].validate()
				.then(res => {
					console.log('success', res);
					uni.showLoading({
						
					})
					
				}).then(res =>{
					axios.post('/api/zhuce?username='+ username + "&password="+password
					+"&sex="+sex+"&securitycode="+securitycode).then(res =>{
						if(res.data.code === 200){
							uni.showToast({
								title:'注册成功',
								mask:true,
							})
						}else{
							return false
						}
					}).catch(res =>{
						uni.showToast({
								title:'用户名已存在',
								mask:true,
								icon:"error"
							})
					})
				})
				.catch(err => {
					console.log('err', err);
				});

			},
			goLogin() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100%;
		height: 100%;
		position: absolute;
		padding: 10%;
		display: flex;
		background: url("../../static/img/wave-haikei.png")center;
		// margin: auto;
	}

	.login-main {
		width: 100%;
		max-width: 400px;
		margin: auto;
		display: flex;
		transition: 0.8s;
	}

	.main-card {
		width: 100%;
		height: 100%;
		border: 1px solid black;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		// margin: auto;
		background-color: white;
		padding: 20rpx;
		.main-text {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			color: #666666;
			line-height: 60rpx;
		}

		.inputtap {
			border-bottom: 1px solid #0099CC;
		}


		.card-register {
			text-align: right;
			margin-top: 30rpx;
		}

		.aii {
			padding: 20rpx 0;
			display: flex;
		}
	}



	.uni-easyinput__content-input {
		background-color: black;
	}

	button {
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 30px;
		font-size: 32rpx;
	}

	.sex {}
</style>
